<template>
  <view class="page-container">
    <!-- 认证提示 -->
    <view class="flex items-center px-4 py-2 bg-[#E8F5F0]">
      <view class="flex items-center">
        <text class="iconfont icon-safety text-green-600 mr-2"></text>
        <text class="text-sm">通过双重认证，才能聊天哦</text>
      </view>
      <button class="bg-[#3AAB87] text-white px-4 py-1 rounded-full text-sm">去认证</button>
    </view>

    <!-- 功能卡片区域 -->
    <view class="grid grid-cols-3 gap-4 p-4">
      <view v-for="(card, index) in functionCards" :key="index" class="bg-[#E8F5F0] rounded-lg p-4">
        <view class="text-lg font-medium mb-2">{{ card.title }}</view>
        <view class="text-xs text-gray-600">{{ card.desc }}</view>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="message-list">
      <!-- 喜欢我的人 -->
      <view class="likes-section px-4 py-3 border-b">
        <view class="flex items-center">
          <image
            class="w-12 h-12 rounded-full blur-sm"
            src="https://i.pinimg.com/originals/3e/3a/b9/3e3ab97387cbbff0082b7bc5d2823e4f.jpg"
          ></image>
          <view class="ml-3">
            <view class="text-base font-medium">喜欢我的人（8人）</view>
            <view class="text-sm text-gray-500">有人名校毕业，很想认识你</view>
          </view>
        </view>
      </view>

      <!-- 系统消息列表 -->
      <view
        v-for="(msg, index) in messageList"
        :key="index"
        class="message-item flex items-center px-4 py-3 border-b"
      >
        <image class="w-12 h-12 rounded-full" :src="msg.avatar"></image>
        <navigator url="/pagesMsg/chat/chat" class="flex-1 ml-3">
          <view class="flex items-center justify-between">
            <text class="text-base font-medium">{{ msg.name }}</text>
            <text class="text-sm text-gray-400">{{ msg.time }}</text>
          </view>
          <view class="text-sm text-gray-500">{{ msg.content }}</view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const functionCards = ref([
  {
    title: '藤友新鲜事',
    desc: '看看喜欢的人聊了什么',
  },
  {
    title: '找搭子',
    desc: '99+人今晚可约',
  },
  {
    title: '心动故事',
    desc: '同频心动的故事',
  },
])

const messageList = ref([
  {
    name: '鹊桥会小助手',
    avatar:
      'https://k.sinaimg.cn/n/news/crawl/750/w450h300/20180813/YBy2-hhqtawx8764242.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
    content: '欢迎来到鹊桥会🥰，查收这份新人使用指南',
    time: '2024/09/05',
    isOfficial: true,
  },
  {
    name: 'Lucky Regina',
    avatar: 'https://image.uisdc.com/wp-content/uploads/2023/08/Character-avatar-20230802-1.png',
    content: '你好呀，没有通过认证我没办法和你对话...',
    time: '2025/01/14',
  },
])
</script>

<style scoped>
.page-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.nav-bar {
  background: #ffffff;
  padding-top: var(--status-bar-height);
}

.verify-btn {
  font-size: 14px;
  line-height: 1.5;
}

.function-card {
  min-height: 100px;
}
</style>
